在前一篇文章中描述了基本的jS操作，這篇要討論關於變數的定義。

推出很久的ES6(2015)中定義了新的兩個變數：const, let，分別代表不可重新定義與可以重新定義的變數（原本的var變數並未就此消失，而是建議以let取代使之更嚴謹）。

首先說明變數的概念，以設計師的視覺化想像，變數就像在影像軟體裡建立一個圖層，可以取重複或不重複的名字，填入重複或不重複的內容。

原先的var變數就是類似這樣的存在，我可以 var x = 0（建立名為x的圖層畫黃線）後再 var x = 5（再建立一個名為x的圖層並畫一樣尺寸的黑線），但問題來了，當圖層視窗的“預覽功能沒有”時，如何判斷這兩個重複名稱的圖層內容為何？

在程式的執行中，瀏覽器會依序執行，所以當x被重新賦予一個值的時候，他會取代掉先前那個值的存在（網頁設計師請想像在同一個位置兩個圖層畫上一樣大小的內容時，上面圖層會遮住下面圖層的內容）。

因此通常在寫程式不會做這種事，即不斷地用相同名稱的變數去重新定義值，以避免出現覆蓋的問題。

可是，就是這個可是！

電腦會當機，人腦會忘記！

有時候會不小心（或因為刻意）重新定義相同的值，那感覺就像黃線被黑線遮住一樣，看不到就是看不到，而人腦完全忘記有重複的這件事，所以電腦很無辜的執行錯誤，人腦只能不斷找錯誤在哪裡。

在ES6推出const, let以前，var變數是很不嚴謹的存在，var可以隨意地重新定義，甚至有可能從區域變數變成全域變數，一不小心就帶來大災難（那就像好不容易畫好線塗完色修完影像才發現都做在同一個圖層上，設計師內心有多崩潰）。

而為什麼網頁設計師不會遇到這個問題呢？

因為影像軟體已經自動幫我們設定好有預覽圖層功能的視窗，有自動做不同命名的圖層（例如圖層一、圖層二、圖層三...）功能，對，請把每個圖層當作不同的變數來想像（但是硬要命相同名稱還粗心做錯邊真的沒辦法拯救，那個要改善的是細心度）。

所以var變數在過去來說很容易在執行上出問題與並在維護中增加難度，特別是團隊進行的專案。

於是，當看見const，就必須知道這是不可以再被重新定義的變數，當看見let，就必需知道這個變數可能會被重新定義（而且它已經存在區塊域的概念，不會渲染到整個全域）。

希望今天寫的內容，能對身為網頁設計師的各位有較大的幫助，因為我想用“我是一個網頁設計師”的角度來切入“我是一個網頁工程師”的方式來換位思考。

一樣，如果有說明的不清楚的部分或有所謬誤，歡迎各位留言給予建議協助勘正。

很幸運能順利的在烤肉整理完後趕上這篇文章，先預祝各位佳節愉快。

相關文章：

JavaScript: var, let, const 差異

前端中階：JS令人搞不懂的地方-變數的生存範圍（scope）